<script setup lang="ts">
import { ref, reactive, nextTick } from 'vue'
import type { Ref } from 'vue'
const html:Ref<string> = ref('')
html.value = '<span style="color: red">This should be red.</span>'
const objectOfAttrs = {
  id: 'container',
  class: 'wrapper'
}

const count = ref(0)
const add = async() => {
  console.time('update')
  count.value++
  await nextTick
  console.timeEnd('update')
}

const student = ref({
  name: '李谦',
  age: 34
})
const updateStudentInfo = () => {
  student.value.age = new Date().getFullYear() - 1949
  student.value.name = '中华人民共和国'
}

type Worker={
  place: '重庆' | '成都',
  level:string
}
const worker:Worker = reactive({
  place: '重庆',
  level: '工程师'
})
const updateWorkerInfo = () => {
  worker.place = '成都'
  worker.level = '高级工程师'
}

// websocket消息推送
const msg = ref('')
import { webSocketStore } from '@/stores/webSocket'
const socketStore = webSocketStore()
function sendMsg() {
  console.log(msg.value)
  socketStore.sendMessage(msg.value)
}

</script>
<template>
  <div v-html="html" v-bind="objectOfAttrs"></div>
  <p>{{ count }}<button @click="add">增加</button></p>
  <span @click="()=>count++">另一种方式增加</span>
  <hr />
  <div>{{ student.name }}</div>
  <div>{{ student.age }}</div>
  <button @click="updateStudentInfo">改变学生信息</button>
  <hr />
  <div>{{ worker.place }}</div>
  <div>{{ worker.level }}</div>
  <button @click="updateWorkerInfo">改变员工信息</button>
  <hr />
  <h3>websocket</h3>
  <el-input v-model="msg" @blur="sendMsg"></el-input>
</template>
<style scoped lang='less'>
</style>
